<!--
 * @Author: 黑白灰01 3193273703@qq.com
 * @Date: 2025-02-12 12:02:35
 * @LastEditors: 黑白灰01 3193273703@qq.com
 * @LastEditTime: 2025-02-13 23:03:39
 * @FilePath: /hei_picture_web/src/page/space/_join/JoinInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <MemberModal ref="memberModal" :spaceId="props.id" />
  <a-typography-paragraph type="secondary"
    >{{ props.type === 'mySpace' ? '我的空间' : '团队空间' }}{{ props.id }}</a-typography-paragraph
  >
  <a-card style="margin: 20px 0px">
    <a-flex justify="end">
      <a-space direction="horizontal">
        <a-button type="primary" @click="gotoAddPicture">添加图片</a-button>
        <a-button type="primary" v-if="props.type !== 'mySpace'" @click="gotoInviteMember"
          >邀请成员</a-button
        >
      </a-space>
    </a-flex>
    <a-divider orientation="left" orientation-margin="0px">图片搜索</a-divider>
    <PictureSearchForm :onSearch="doSearch" />
    <a-card>
      <SpacePictureList :dataList="pictureList" :loading="loading" :onDelete="fetchData" />
      <!-- 分页 -->
      <a-pagination
        class="pagination"
        v-model:current="searchParams.current"
        v-model:page-size="searchParams.pageSize"
        :page-size-options="pageSizeOptions"
        :total="total"
        :show-total="(total: number) => `共 ${total} 张图片`"
        show-size-changer
        @showSizeChange="onShowSizeChange"
      />
    </a-card>
  </a-card>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import PictureSearchForm from '@/components/space/PictureSearchForm.vue'
import SpacePictureList from '@/components/space/SpacePictureList.vue'
import { listPictureVoByPageUsingPost } from '@/api/pictureController'
import { useRouter } from 'vue-router'
import MemberModal from './MemberModal.vue'
interface Props {
  id: string
  type: string
}
const props = defineProps<Props>()
const router = useRouter()
const pictureList = ref<API.PictureVO[]>([])
const loading = ref(false)
const searchParams = ref({
  current: 1,
  pageSize: 10,
  spaceId: props.id,
})
const onShowSizeChange = () => {
  fetchData()
}
const doSearch = (newSearchParams: API.PictureQueryRequest) => {
  searchParams.value = {
    ...searchParams.value,
    ...newSearchParams,
  }
  searchParams.value.current = 1
  fetchData()
}
const gotoAddPicture = () => {
  // console.log('gotoAddPicture')
  router.push({
    path: '/picture_add',
    query: {
      spaceId: props.id,
    },
  })
}
const fetchData = async () => {
  // console.log('fetchData')
  loading.value = true
  const { data: res } = await listPictureVoByPageUsingPost({
    ...searchParams.value,
    spaceId: props.id.toString(),
  })
  // console.log(res)
  pictureList.value = res.data?.records || []
  total.value = res.data?.total || 0
  loading.value = false
}

const pageSizeOptions = ref([10, 20, 30, 40, 50])
const total = ref(0)
const memberModal = ref<InstanceType<typeof MemberModal>>()
const gotoInviteMember = () => {
  memberModal.value?.openModal()
}
watchEffect(() => {
  // console.log(props.id)
  fetchData()
})
</script>

<style scoped></style>
